<template>
  <el-card class="card">
    <el-page-header class="header" content="详情页面" icon="el-icon-arrow-left" @back="$router.go(-1)"></el-page-header>
    <el-timeline v-loading="loading">
      <el-timeline-item
          v-for="(item, index) in LabelData"
          :key="index"
          class="article">
        <el-card class="cardMin" shadow="hover" @click="$router.push('/blog/aetails/'+item.articleId)">
          <el-button class="titleFont" type="text"><h3>{{ item.articleTitle }}</h3></el-button>
          <div>
            <el-button class="active" icon="el-icon-user" size="small" type="text">{{ item.userName }}</el-button>
            <el-button class="active" icon="el-icon-reading" size="small" type="text">{{
                item.articleClassification
              }}
            </el-button>
            <el-button class="active" icon="el-icon-date" size="small" type="text">{{ item.articleDate }}</el-button>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script>
export default {
  name: "LabelPage",
  data() {
    return {
      loading: true,
      LabelData: '',
    }
  },
  created() {
    let id = this.$route.params.id;
    if (id !== undefined) {
      this.$axios.post('articles/getLabel', {articleClassification: id}).then((res) => {
        if (res.data.success){
          this.LabelData = res.data.data;
          this.loading =false;
        }
      })
    }
  },
}
</script>

<style scoped>
.cardMin {
  border: 0;
}

.card {
  border: solid 0;
  padding: 0 150px;
}

.header {
  padding-bottom: 50px;
}

.active {
  color: #7F8085;
}

.titleFont {
  color: #1a1919;
}
</style>